<style scoped >
    /*线扣操作页面*/
    .margin .ivu-form-item-content{
        margin-left: 0px;
    }
    /**/
    table{
         border-radius: 3px;
         color: #333333;
     }
    tr th{
        height: 35px;
        text-align: center;
        font-size: 14px;
        border-right: 1px solid #e3e8ee;
        border-bottom: 1px solid #e3e8ee;
        background-color: #f1f4f9;
        color: #000;
    }
    tr.trhover td{
        height: 35px;
        text-align: center;
        font-size: 13px;
        font-weight: normal;
        background-color: #fff;
        transition: background-color .2s ease-in-out;
        border-right: 1px solid #e3e8ee;
        border-bottom: 1px solid #e3e8ee;
    }
    .trhover:nth-child(2n+1) td{
        background-color: #f5f7f9;
    }
    label{color: #333333 !important;}
    .trhover:nth-child(n+1):hover td{
        background-color: #ebf7ff;
    }
    .ivu-input{
        width: 90%;
    }
    tr#pzgy:last-child td{
        border-bottom: 0 !important;
    }
    .main_table .top_content th{
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#f5f5f5));
        border-bottom:1px solid #e3e8ee;
        color: #252527;
        display: block;
        padding-top: 4px;
    }
    .main_table tr td{
        text-align: left;
        padding-left: 15px;
        width: 600px;
        border-right:0px;
        border-bottom: 0px;
        height: 35px;
        font-size: 14px;
        font-weight: normal;
        background-color: #fff;
    }
    .main_table tr{
        width:100%;
        float: left;
        border-bottom: 1px  solid  #d7dde4;
    }
    .main_table tr:hover{
        background:#fff;
    }
    .main_table tr:last-child td{
        border-bottom: none;
    }
    #buckleStyle th{
        border-right:0;
    }
    .searchHistory,.search{
        margin-top: 12px;
    }
    .ivu-table-wrapper{margin-top: 5px;}
    @media screen and (max-width: 1600px){
        .main_table tr td{
            width:600px;
        }
        tr th{height: 34px;font-size: 12px;}
        tr.trhover td{height: 34px;font-size: 12px;}
        .main_table tr td{height: 34px;font-size: 12px;}
    }
    @media screen and (max-width: 1366px) {
        tr th {height: 30px;  }
        .main_table tr td{
            width:524px;
        }

        tr.trhover td {height: 30px;  }
        .main_table tr td {height: 30px;  }
    }

</style>
<template>
    <div class="console-product">
        <!--头部-->
        <Row class="position">
            <i-col span="24">
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">业务中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">线扣操作</span>
                </div>
            </i-col>
        </Row>
        <!--头部结束-->
        <div class="console-product-contcent" id="contcentHeight" :style="{ height: height + 'px' }">
            <Form class="searchform" ref="buckleForm" :model="buckleForm" inline label-position="left">
                <div class="fl">
                    <Form-item label="面料:" :label-width="35" prop="mlbm" style="width:130px;margin-top: 10px;">
                        <Input v-model="buckleForm.mlbm" placeholder="" @on-enter="buckleSearch"></Input>
                    </Form-item>
                    <Form-item label="订单:" :label-width="35"  prop="khdh" style="width:130px;margin-top: 10px;">
                        <Input v-model="buckleForm.khdh" placeholder="" @on-enter="buckleSearch"></Input>
                    </Form-item>
                    <Form-item label="日期:" :label-width="35"  prop="trantime" style="width:150px;margin-top: 10px;">
                        <Date-picker type="date" v-model="buckleForm.trantime" placeholder="选择日期"></Date-picker>
                    </Form-item>
                    <Form-item label="时间点:" :label-width="50"  prop="time" style="width:130px;margin-top: 10px;">
                        <Select v-model="buckleForm.time" filterable  placeholder="请选择状态">
                            <Option v-for="item in xdsjddnid" :value="item.value" :key="item">{{ item.label }}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="服装类别:" :label-width="65" prop="fz" style="width:150px;margin-top: 10px;">
                        <Select v-model="buckleForm.fz" filterable  placeholder="请选择状态">
                            <Option v-for="item in fzflEcode" :value="item.value" :key="item">{{ item.label }}</Option>
                        </Select>
                    </Form-item>
                </div>
                <div class="erpset fl" style="width: 160px;">
                    <Form-item :label-width="10" prop="scddzt"  style="width:170px;margin-bottom: 0">
                            <span>ERP状态：</span>
                            <Radio-group v-model="buckleForm.scddzt" label="">
                                <Radio label="1">是</Radio>
                                <Radio label="">否</Radio>
                            </Radio-group>
                    </Form-item>
                    <Form-item :label-width="10"  prop="status"  style="width:170px;margin-bottom: 0">
                            <span> 配置状态：</span>
                            <Radio-group v-model="buckleForm.status" label="">
                                <Radio label="1">是</Radio>
                                <Radio label="">否</Radio>
                            </Radio-group>
                    </Form-item>
                </div>
                <div>
                    <Form-item >
                        <Button class="search" @click="buckleSearch">搜索</Button>
                        <Button class="search" @click="historySearch">搜历史</Button>
                    </Form-item>
                </div>
            </Form>
            <div id="gyxxgl" style="display: none;">
                <div style="margin:0px auto;border:1px solid #e3e8ee">
                    <table class="main_table  clearfix" cellspacing="1" cellpadding="0" :model="gyxx">
                        <tr class="top_content">
                            <th><label style="line-height: 25px;">工艺信息【<span>{{gyxx.khdh}}</span>】     款式号：<span>{{gyxx.ksh}}</span></label></th>
                        </tr>
                       <tr algin='left' v-for="x in kuanTexta" >
                           <td style="color: #1e1e1e"  class="content" v-for="(item,index) in x"><label for=""  style="color:#999">{{item.ecode}} :</label>  {{item.ename}}{{item.tranmemo}}</td>
                       </tr>
                    </table>
                </div>
            </div>
            <Loading v-if="spinShow"></Loading>
            <div class="ivu-table-wrapper" v-if="tableShow">
                <table   id="buckleOperation" ref="buckleTable" class="buckleOperation" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr :modal="buckleColumns">
                        <th width="166px">{{buckleColumns.ecode}}</th>
                        <th width="134px">{{buckleColumns.khdh}}</th>
                        <th width="95px">{{buckleColumns.fzflecode}}</th>
                        <th width="113px">{{buckleColumns.mlbm}}</th>
                        <th width="111px">{{buckleColumns.mrgyecode}}</th>
                        <th width="149px">{{buckleColumns.kh}}</th>
                        <th width="149px">{{buckleColumns.xkh}}</th>
                        <th width="149px">{{buckleColumns.xianh}}</th>
                        <th width="149px">{{buckleColumns.syxh}}</th>
                        <th width="149px">{{buckleColumns.nzbx}}</th>
                        <th width="149px">{{buckleColumns.wzbx}}</th>
                        <th width="158px">{{buckleColumns.id}}</th>
                    </tr>
                    <tr v-for="(item,index) in buckleData" class="trhover">
                        <td width="166px"><Tooltip placement="bottom-start" :content="item.ecode"><span>{{item.ecode}}</span></Tooltip></td>
                        <td width="134px" v-on:click="flptGyxx(index+1,item)" placement="bottom-start" style="cursor: pointer;color:#2ab4b4"><Tooltip placement="top" :content="item.khdh"><span>{{item.khdh}}</span></Tooltip></td>
                        <td width="95px"><Tooltip  placement="bottom-start" :content="item.fzflecode"><span>{{item.fzflecode}}</span></Tooltip></td>
                        <td width="113px"><Tooltip placement="bottom-start"  :content="item.mlbm"><span>{{item.mlbm}}</span></Tooltip></td>
                        <td width="111px" ><Tooltip  placement="bottom-start" :content="item.mrgyecode"><span>{{item.mrgyecode}}</span></Tooltip></td>
                        <td width="149px"><Tooltip placement="bottom-start" :content="item.kh"><input v-model="item.kh" value="" class="ivu-input" placeholder="字母/数字-字母/数字"></Tooltip></td>
                        <td width="149px"><Tooltip placement="bottom-start" :content="item.xkh"><input  v-model="item.xkh" type="text" value="" class="ivu-input"></Tooltip></td>
                        <td width="149px"><Tooltip placement="bottom-start" :content="item.xianh"><input v-model="item.xianh" type="text" value="" class="ivu-input"></Tooltip></td>
                        <td width="149px"><Tooltip placement="bottom-start" :content="item.syxh"><input v-model="item.syxh" type="text" value="" class="ivu-input"></Tooltip></td>
                        <td width="149px"><Tooltip placement="bottom-start" :content="item.nzbx"><input v-model="item.nzbx" type="text" value="" class="ivu-input"></Tooltip></td>
                        <td width="149px"><Tooltip placement="bottom-start" :content="item.wzbx"><input v-model="item.wzbx" type="text" value="" class="ivu-input"></Tooltip></td>
                        <td width="158px" v-model="item.scddid"><button v-if="showOperation" v-on:click="rowCopy(index)" class="green ivu-btn" style="border:0;background-color: inherit;font-size: 14px;">↓</button><button class="green ivu-btn" v-if="showOperation" v-on:click='buckleSave(index)' ><Icon type="refresh"></Icon>更新</button></td>
                    </tr>
                    <tr v-if="buckleData.length==0" class="trhover">
                        <td colspan='12'>暂无筛选结果</td>
                    </tr>
                </table>
            </div>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,//加载
                showOperation:true,
                //线扣操作搜索
                buckleForm: {
                    mlbm: '',
                    khdh: '',
                    trantime: new Date(),
                    time: ' ',
                    fz: 'XF',
                    scddzt:'',
                    status:'',
                    cnbltype:""
                },
                xdsjddnid:[
                    {
                        value:' ',
                        label:'时间段'
                    },
                    {
                        value:'18',
                        label:'00:00'
                    },
                    {
                        value:'16',
                        label:'01:00'
                    },
                    {
                        value:'17',
                        label:'02:00'
                    },
                    {
                        value:'19',
                        label:'03:00'
                    },
                    {
                        value:'20',
                        label:'04:00'
                    },
                    {
                        value:'21',
                        label:'05:00'
                    },
                    {
                        value:'22',
                        label:'06:00'
                    },
                    {
                        value:'23',
                        label:'07:00'
                    },
                    {
                        value:'24',
                        label:'08:00'
                    },
                    {
                        value:'1',
                        label:'09:00'
                    },
                    {
                        value:'5',
                        label:'10:00'
                    },
                    {
                        value:'2',
                        label:'11:00'
                    },
                    {
                        value:'6',
                        label:'13:00'
                    },
                    {
                        value:'3',
                        label:'14:00'
                    },
                    {
                        value:'7',
                        label:'15:00'
                    },
                    {
                        value:'4',
                        label:'16:00'
                    },
                    {
                        value:'8',
                        label:'17:00'
                    },
                    {
                        value:'9',
                        label:'18:00'
                    },
                    {
                        value:'10',
                        label:'19:00'
                    },
                    {
                        value:'11',
                        label:'20:00'
                    },
                    {
                        value:'12',
                        label:'21:00'
                    },
                    {
                        value:'13',
                        label:'22:00'
                    },
                    {
                        value:'14',
                        label:'23:00'
                    },
                    {
                        value:'15',
                        label:'24:00'
                    }
                ],
                //服装类别
                fzflEcode:[
                    {
                        value:'XF',
                        label:'西服厂'
                    },
                    {
                        value:'CY',
                        label:'衬衣厂'
                    }
                ],
                //线扣操作表格数据
                buckleColumns:{
                    ecode:'生产订单号',
                    khdh:'客户订单号',
                    fzflecode:'类别',
                    mlbm:'面料号',
                    mrgyecode:'衬类型',
                    kh:'扣号',
                    xkh:'袖口号',
                    xianh:'线号',
                    syxh:'锁眼线号',
                    nzbx:'内珠边线',
                    wzbx:'外珠边线',
                    id:'操作',
                },
                buckleData:[],
                gyxx:{//工艺信息
                    khdh:"",
                    ksh:"",
                    data:[]
                },
                kuanText:[],
                kuanTexta:[]
            }

        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize = 20;
            }
            this.buckleData = this.buckleTableData(this.buckleForm,this.currentPage,this.pageSize);
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            buckleTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var mlbm = formData.mlbm;//面料
                var khdh = formData.khdh;//返修单号
                var xdsjddnid = formData.time;//时间点
                var trantimestr = formData.trantime;//日期
                var status = formData.status;//配置状态
                var scddzt = formData.scddzt;//EPR状态
                var fzflecode = formData.fz;//服装类别
                var cnbltype = formData.cnbltype;//是否历史库,1：历史

                if(formData.trantime.length != 0){
                    var DateTime = (new Date(formData.trantime)).getTime();
                    trantimestr = new Date(DateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        mlbm : mlbm,
                        khdh : khdh,
                        xdsjddnid : xdsjddnid,
                        trantimestr : trantimestr,
                        status : status,
                        scddzt : scddzt,
                        fzflecode : fzflecode,
                        cnbltype : cnbltype
                    }
                }
                axios.get('/accessories',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.buckleData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })

            },
            //条件查询
            buckleSearch(){
                this.buckleForm.cnbltype = "";
                this.currentPage=1;
                this.buckleData = this.buckleTableData(this.buckleForm,this.currentPage,this.pageSize);
                if(this.buckleForm.scddzt == ''){
                    this.showOperation = true;
                }else {
                    this.showOperation = false;
                }
            },
            //历史查询
            historySearch(){
                this.buckleForm.cnbltype = "1";
                this.currentPage=1;
                this.buckleData = this.buckleTableData(this.buckleForm,this.currentPage,this.pageSize);
                if(this.buckleForm.scddzt == ''){
                    this.showOperation = true;
                }else {
                    this.showOperation = false;
                }
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.buckleData = this.buckleTableData(this.buckleForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.buckleData = this.buckleTableData(this.buckleForm,this.currentPage,this.pageSize);
            },
            rowCopy:function(index){
                this.buckleData[index+1].kh =this.buckleData[index].kh;
                this.buckleData[index+1].xianh =this.buckleData[index].xianh;
                this.buckleData[index+1].syxh=this.buckleData[index].syxh;
                this.buckleData[index+1].nzbx=this.buckleData[index].nzbx;
                this.buckleData[index+1].wzbx=this.buckleData[index].wzbx;
            },
            //保存
            buckleSave:function(index){
                var row = this.buckleData;
                var kh = this.buckleData[index].kh;
                var xianh = this.buckleData[index].xianh;
                var syxh = this.buckleData[index].syxh;
                var nzbx = this.buckleData[index].nzbx;
                var wzbx = this.buckleData[index].wzbx;
                if(row){
                    if(/^[A-Z]+\d+-\d+$/.test(kh)){
                        let data = {
                            kh : kh,
                            xkh : this.buckleData[index].xkh,
                            xianh : xianh,
                            syxh : syxh,
                            nzbx : nzbx,
                            wzbx : wzbx,
                            scddpzmxid : this.buckleData[index].scddpzmxid,

                        };
                        axios.put('/accessories', data).then(res => {
                            this.$Message.success('更新成功');
                        }).catch(err =>{
                        });

                    }else{
                        this.$Message.error('扣号格式错误！');
                        this.buckleData[index].kh="";
                    }
                }
            },
            //插入一行
            flptGyxx:function(index,item){
                $("#pzgy").remove();
                let data = {
                    params: {
                        scddid : item.scddid,
                        fzflid : item.fzflid,
                        cnbltype:this.buckleForm.cnbltype

                    }
                };
                axios.get('/accessories/process',data).then(res => {
                    this.gyxx.khdh = item.scddid;
                    this.gyxx.ksh = item.ksh;
                    this.gyxx.data = res.data;
                    this.kuanText=new Array();
                     this.kuanTexta=new Array();
                    for(var i=0;i<this.gyxx.data.length;i++){
                        this.kuanText.push(this.gyxx.data[i]);
                        if(this.kuanText.length == 2){
                            this.kuanTexta.push(this.kuanText);
                            this.kuanText = [];
                        }
                        if(i==this.gyxx.data.length-1){
                            this.kuanTexta.push(this.kuanText);
                            this.kuanText = [];
                        }
                    }
                    this.$nextTick(function(){
                        var html=$("#gyxxgl").html();
                        $('#buckleOperation tr:eq('+index+')').after("<tr id='pzgy'><td id='buckleStyle' style='padding:10px;border-bottom: 1px solid #e3e8ee;' colspan='12'>"+html+"</td></tr>");
                    });
                }).catch(err =>{
                })
            }
        }
    }
</script>